<template>
  <!-- <div
    b
    class="fhl"
    style="background: #fff"
    ref="el"
  >
    @vueuse/core我要全屏
    <br>
    {{ isFullscreen }}
    <el-button
      size="small"
      @click="enter"
    >
      enter
    </el-button>
    <el-button
      size="small"
      @click="exit"
    >
      exit
    </el-button>
    <el-button
      size="small"
      @click="toggle"
    >
      toggle
    </el-button>
  </div> -->
  <UseFullscreen v-slot="{ toggle }">
    <button
      b
      @click="toggle"
    >
      @vueuse/components 我也要全屏
    </button>
  </UseFullscreen>
</template>
<script lang="ts" setup>
// 第一种
// import { useFullscreen } from '@vueuse/core'

// 第二种
import { UseFullscreen } from '@vueuse/components'

// const el = ref<HTMLElement | null>(null)
// const { isFullscreen, enter, exit, toggle } = useFullscreen(el)
</script>
<style lang="scss" scoped></style>
